<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <base target="_blank">
    <link rel="stylesheet" href="./index.css">

</head>

<body>


    <!-- 固定定位 -->
    <div class="posi">
        <a href="#firstbox">中国古诗</a>
        <a href="#secondbox">中国美景</a>
        <a href="#thirdbox">购物车</a>
        <a href="#fourthbox">趣闻新闻</a>
        <a href="#fifthbox">贪吃蛇</a>
    </div>
    <!-- 首页导航栏 -->
   
        <nav class="nav">
           <div class="nav_1">
            <a href="./index.html">首页</a>
            <a href="../网站/Door.html">组员网页</a>
            <a href="#">组员网页</a>
            <a href="./网页/登录注册界面.html">登录</a>
            <span>|</span>
            <a href="./网页/登录注册界面.html">注册</a>
           </div>
           <div class="nav_2">
            <img src="./CSS小组作业image/小组log.png" alt="">
            <form>
                <img src="./CSS小组作业image/搜索.png" alt="">
                <input type="text" placeholder="搜索...">
            </form>
           </div>
        </nav>

    
    
    <article>
        <!-- 第一个幻灯片 -->
    <div class="first_title first" style="margin-top: 60px;align-items: center;">
        <h1>中国新闻热点</h1>
        <p>中国是一个有着五千多年历史的文明古国,在漫长的岁月里,我们创造了灿烂的华夏文化</p>
    </div>
    <div class="first_image">
        <div class="first_text">
            <a href="https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E7%BB%8F%E6%B5%8E/3049">中国经济快速发展，中国城市不断完善</a>
            <a href="https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E8%88%AA%E5%A4%A9%E4%BA%8B%E4%B8%9A/12714185?fromtitle=%E4%B8%AD%E5%9B%BD%E8%88%AA%E5%A4%A9">中国航天技术发展速度震惊中外</a>
            <a href="https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E5%86%9C%E6%9D%91/5056274">中国农村，实施乡村振兴，发展美丽农村</a>
            <a href="https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E5%A4%96%E4%BA%A4%E5%AE%98?fromModule=lemma_search-box">中国外交官，霸气发言。所以中国正在不断强大</a>
            <a href="https://baike.baidu.com/item/%E4%B8%AD%E5%8D%8E%E4%BA%BA%E6%B0%91%E5%85%B1%E5%92%8C%E5%9B%BD%E5%86%9B%E4%BA%8B/7417573?fromtitle=%E4%B8%AD%E5%9B%BD%E5%86%9B%E4%BA%8B&fromid=78139">中国的东风-41，中国的军事越来越强大</a>

        </div>
        <a href="https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E7%BB%8F%E6%B5%8E/3049"><img src="./CSS小组作业image/第一个幻灯片1.jpg" alt=""></a>
        <a href="https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E8%88%AA%E5%A4%A9%E4%BA%8B%E4%B8%9A/12714185?fromtitle=%E4%B8%AD%E5%9B%BD%E8%88%AA%E5%A4%A9"><img src="./CSS小组作业image/第一个幻灯片2.jpg" alt=""></a>
        <a href="https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E5%86%9C%E6%9D%91/5056274"><img src="./CSS小组作业image/第一个幻灯片3.webp" alt=""></a>
       <a href="https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E5%A4%96%E4%BA%A4%E5%AE%98?fromModule=lemma_search-box"> <img src="./CSS小组作业image/第一个幻灯片4.webp" alt=""></a>
        <a href="https://baike.baidu.com/item/%E4%B8%AD%E5%8D%8E%E4%BA%BA%E6%B0%91%E5%85%B1%E5%92%8C%E5%9B%BD%E5%86%9B%E4%BA%8B/7417573?fromtitle=%E4%B8%AD%E5%9B%BD%E5%86%9B%E4%BA%8B&fromid=78139"><img src="./CSS小组作业image/第一张幻灯片5.jpg" alt=""></a>
    </div>
    <!-- 第一个media盒子 -->
    <div class="first_media">
        <div class="first_media_move">
            <a href="https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E7%BB%8F%E6%B5%8E/3049">
                <img src="./CSS小组作业image/第一个幻灯片1.jpg" alt="">
                <span>中国经济快速发展，中国城市不断完善</span>
            </a>
            <a href="https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E8%88%AA%E5%A4%A9%E4%BA%8B%E4%B8%9A/12714185?fromtitle=%E4%B8%AD%E5%9B%BD%E8%88%AA%E5%A4%A9">
                <img src="./CSS小组作业image/第一个幻灯片2.jpg" alt="">
                <span>中国航天技术发展速度震惊中外</span>
            </a>
            <a href="https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E5%86%9C%E6%9D%91/5056274">
                <img src="./CSS小组作业image/第一个幻灯片3.webp" alt="">
                <span>中国农村，实施乡村振兴，发展美丽农村</span>
            </a>
            <a href="https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E5%A4%96%E4%BA%A4%E5%AE%98?fromModule=lemma_search-box">
                <img src="./CSS小组作业image/第一个幻灯片4.webp" alt="">
                <span>中国外交官，霸气发言。所以中国正在不断强大</span>
            </a>
            <a href="https://baike.baidu.com/item/%E4%B8%AD%E5%8D%8E%E4%BA%BA%E6%B0%91%E5%85%B1%E5%92%8C%E5%9B%BD%E5%86%9B%E4%BA%8B/7417573?fromtitle=%E4%B8%AD%E5%9B%BD%E5%86%9B%E4%BA%8B&fromid=78139">
                <img src="./CSS小组作业image/第一张幻灯片5.jpg" alt="">
                <span>中国的东方-41，中国的军事越来越强大</span>
            </a>
        </div>
       
        <ul class="first_media_ul">
                <li class="first_media_active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
        </ul>
        

    </div>


    <!-- 第二个幻灯片 -->
    <div class="first_title" style="margin-top: 40px;" id="firstbox">
        <h1>中华古诗</h1>
       
    </div>

    <div class="LiBai">
        <div class="poet">
            <a href="https://baike.baidu.com/item/李白"><img src="./CSS小组作业image/李白.webp" alt=""></a>
        </div>
        <div class="poem">
            <h1 class="poem_title">望庐山瀑布</h1>
            <p class="poem_sentence">
            <p>日照香炉生紫烟，遥看瀑布挂前川。</p>
            <p>飞流直下三千尺，疑是银河落九天。</p>
            </p>
            <h1 class="poem_title">早发白帝城</h1>
            <p class="poem_sentence">
            <p>朝辞白帝彩云间，千里江陵一日还。</p>
            <p>两岸猿声啼不住，轻舟已过万重山。</p>
            </p>
            <h1 class="poem_title">赠汪伦</h1>
            <p class="poem_sentence">
            <p>李白乘舟将欲行，忽闻岸上踏歌声。</p>
            <p>桃花潭水深千尺，不及汪伦送我情。</p>
            </p>
            <h1 class="poem_title">望天门山</h1>
            <p class="poem_sentence">
            <p>天门中断楚江开，碧水东流至此回。</p>
            <p>两岸青山相对出，孤帆一片日边来。</p>
            </p>
        </div>
    </div>
    <div class="LiBai" style="margin-top: 40px;">
        <div class="poet">
            <a href="https://baike.baidu.com/item/杜甫"><img src="./CSS小组作业image/杜甫.jpg" alt=""></a>
        </div>
        <div class="poem">
            <h1 class="poem_title">春望</h1>
            <p class="poem_sentence">
            <p>国破山河在，城春草木深。</p>
            <p>感时花溅泪，恨别鸟惊心。</p>
            <p>烽火连三月，家书抵万金。</p>
            <p>白头搔更短，浑欲不胜簪。</p>
            </p>
            <h1 class="poem_title">春夜喜雨</h1>
            <p class="poem_sentence">
            <p>好雨知时节，当春乃发生。</p>
            <p>随风潜入夜，润物细无声。</p>
            <p>野径云俱黑，江船火独明。</p>
            <p>晓看红湿处，花重锦官城。</p>
            </p>
            <h1 class="poem_title">望岳</h1>
            <p class="poem_sentence">
            <p>岱宗夫如何？齐鲁青未了。</p>
            <p>造化钟神秀，阴阳割昏晓。</p>
            <p>荡胸生曾云，决眦入归鸟。</p>
            <p>会当凌绝顶，一览众山小。</p>
            </p>
            <h1 class="poem_title">绝句</h1>
            <p class="poem_sentence">
            <p>两个黄鹂鸣翠柳，一行白鹭上青天。</p>
            <p>窗含西岭千秋雪，门泊东吴万里船。</p>
            </p>
        </div>
    </div>

    <!-- 可曾听闻桂林山水甲天下 -->
    <div class="first_title" style="margin-top: 40px;" id="secondbox">
        <h1>中华美景你值得观看</h1>
        
    </div>
    <!-- 第三个幻灯片 -->
    <div class="box">
        <div class="d1 cur" style=" left: 0;">
            <a href="https://baike.baidu.com/item/桂林山水"><img src="./CSS小组作业image/第二个幻灯片1.jpg" alt=""></a>
            <span class="sp1">桂林山水</span>
            <div class="text">
                <p class="title">桂林山水甲天下</p>
                <p class="detailed_text">桂林山水自然天成，山峦叠嶂，碧水蓝天，构成一幅动人的画卷。</p>
            </div>
        </div>
        <div class="d2" style="left: 400px;">
            <a href="https://baike.baidu.com/item/黄山"><img src="./CSS小组作业image/第二个幻灯片2.webp" alt=""></a>
            <span class="sp1">黄山</span>
            <div class="text">
                <p class="title">黄山奇景</p>
                <p class="detailed_text">无论是雄伟的山峰，还是险峻的悬崖，或是飘渺的云海，黄山都有着令人叹为观止的美丽。</p>
            </div>
        </div>
        <div class="d3" style="left: 500px;">
            <a href="https://baike.baidu.com/item/泰山"><img src="./CSS小组作业image/第二个幻灯片3.jpeg" alt=""></a>
            <span class="sp1">泰山</span>
            <div class="text">
                <p class="title">东岳泰山</p>
                <p class="detailed_text">泰山的美景，既有高耸入云的山峰，又有曲径通幽的山路，令人陶醉。</p>
            </div>
        </div>
        <div class="d4" style="left: 600px;">
            <a href="https://baike.baidu.com/item/华山"><img src="./CSS小组作业image/第二个幻灯片4.jpg" alt=""></a>
            <span class="sp1">华山</span>
            <div class="text">
                <p class="title">西岳华山</p>
                <p class="detailed_text">峰峦叠嶂的华山，宛如一幅壮美的画卷，让人惊叹不已。</p>
            </div>

        </div>
        <div class="d4" style="left: 700px;">
            <a href="https://baike.baidu.com/item/衡山"><img src="./CSS小组作业image/第二个幻灯片5.jpg" alt=""></a>
            <span class="sp1">衡山</span>
            <div class="text">
                <p class="title">南越衡山</p>
                <p class="detailed_text">衡山之景，四季皆宜。</p>
            </div>

        </div>
        <div class="d4" style="left: 800px;">
            <a href="https://baike.baidu.com/item/恒山"><img src="./CSS小组作业image/第二个幻灯片6.webp" alt=""></a>
            <span class="sp1">恒山</span>
            <div class="text">
                <p class="title">北岳恒山</p>
                <p class="detailed_text">在自然界中，恒山如一位不朽的守护者，用其高峰展现着无尽的力量与壮丽。</p>
            </div>

        </div>
        <div class="d4" style="left: 900px;">
            <a href="https://baike.baidu.com/item/西湖"><img src="./CSS小组作业image/第二个幻灯片7.jpg" alt=""></a>
            <span class="sp1">西湖</span>
            <div class="text">
                <p class="title">西湖之静</p>
                <p class="detailed_text">静谧的西湖，碧波荡漾，倒映着蓝天白云，悠然自得。</p>
            </div>

        </div>
        <div class="d4" style="left: 1000px;">
            <a href="https://baike.baidu.com/item/长城"><img src="./CSS小组作业image/第二个幻灯片8.jpg" alt=""></a>
            <span class="sp1">长城</span>
            <div class="text">
                <p class="title">长城之壮</p>
                <p class="detailed_text">在朝霞的映照下，长城犹如一条金色的巨龙，腾云驾雾，气势磅礴。</p>
            </div>

        </div>
        <div class="d4" style="left: 1100px;">
            <a href="https://baike.baidu.com/item/西藏"><img src="./CSS小组作业image/第二个幻灯片9.webp" alt=""></a>
            <span class="sp1">西藏</span>
            <div class="text">
                <p class="title">青葱西藏</p>
                <p class="detailed_text">西藏，那片寄托着无尽信仰的圣土，绽放着无尽的神秘与美丽。</p>
            </div>

        </div>

    </div>
    <!-- 第三个media盒子 -->
    <div class="third_media">
        <a href="https://baike.baidu.com/item/桂林山水">
            <img src="./CSS小组作业image/第二个幻灯片1.jpg" alt="">
            <span>桂林山水</span>
        </a>
        <a href="https://baike.baidu.com/item/黄山">
            <img src="./CSS小组作业image/第二个幻灯片2.webp" alt="">
            <span>黄山奇景</span>
        </a>
        <a href="https://baike.baidu.com/item/泰山">
            <img src="./CSS小组作业image/第二个幻灯片3.jpeg" alt="">
            <span>东岳泰山</span>
        </a>
        <a href="https://baike.baidu.com/item/华山">
            <img src="./CSS小组作业image/第二个幻灯片4.jpg" alt="">
            <span>西岳华山</span>
        </a>
        <a href="https://baike.baidu.com/item/衡山">
            <img src="./CSS小组作业image/第二个幻灯片5.jpg" alt="">
            <span>南越衡山</span>
        </a>
        <a href="https://baike.baidu.com/item/恒山">
            <img src="./CSS小组作业image/第二个幻灯片6.webp" alt="">
            <span>北岳恒山</span>
        </a>
        <a href="https://baike.baidu.com/item/西湖">
            <img src="./CSS小组作业image/第二个幻灯片7.jpg" alt="">
            <span>西湖之静</span>
        </a>
        <a href="https://baike.baidu.com/item/长城">
            <img src="./CSS小组作业image/第二个幻灯片8.jpg" alt="">
            <span>长城之壮</span>
        </a>
    </div>




    <!-- 第四个幻灯片盒子 -->
    <div class="first_title" id="thirdbox">
        <h1>购物窗口，你值得拥有</h1>
    </div>
    <div class="shopping">

        <div class="shopping_nav">
            <a href="https://www.taobao.com/" onmouseover="a(1)">
                <span>淘宝</span>
                <div></div>
            </a>
            <a href="https://www.jd.com/" onmouseover="a(2)">
                <span>京东</span>
                <div></div>
            </a>
            <a href="https://www.pinduoduo.com/" onmouseover="a(3)">
                <span>拼多多</span>
                <div></div>
            </a>
        </div>
        <div class="shopping_choose">
            <a href="https://www.taobao.com/">
                <span>淘宝</span>
                <img src="./CSS小组作业image/第三个幻灯片1.jpeg" alt="">
            </a>
            <a href="https://www.jd.com/">
                <span>京东</span>
                <img src="./CSS小组作业image/第三个幻灯片2.webp" alt="">
            </a>
            <a href="https://www.pinduoduo.com/">
                <span>拼多多</span>
                <img src="./CSS小组作业image/第三个幻灯片3.webp" alt="">
            </a>
            <div class="shopping_choose_nav">
                <p onclick="p(-1)">
                    <</p>
                        <p onclick="p(1)">></p>
            </div>
        </div>
    </div>
    <div class="shopping_log">
        <div>
            <img src="./CSS小组作业image/注册.png" alt="">
            <p>登录注册,开始购物</p>
        </div>
        <div>
            <img src="./CSS小组作业image/会员.png" alt="">
            <p>开通会员,享受优惠</p>
        </div>
        <div>
            <img src="./CSS小组作业image/礼品_填充.png" alt="">
            <p>许多优惠,等你来抢</p>
        </div>
        <div>
            <img src="./CSS小组作业image/电器.png" alt="">
            <p>电器器具,应有尽有</p>
        </div>
    </div>
    <!-- 第四个media盒子 -->

    <div class="fourth_media">
        <a href="https://www.taobao.com/">
            <img src="./CSS小组作业image/第三个幻灯片1.jpeg" alt="">
        </a>
        <a href="https://www.jd.com/">
            <img src="./CSS小组作业image/第三个幻灯片2.webp" alt="">
        </a>
        <a href="https://www.pinduoduo.com/">
            <img src="./CSS小组作业image/第三个幻灯片3.webp" alt="">
        </a>
    </div>


    <!-- 第五个盒子新闻 -->
    <div class="first_title fifth" style="align-items: center;" id="fourthbox">
        <h1>趣闻要闻</h1>
    </div>
    <div class="newsbox">
        <button class="newsbtn">点击3秒刷新热点事件</button>
        <button class="newsbtn2">被用3秒刷新热点事件</button>
        <div class="news">
            <a href="https://tv.cctv.com/2024/05/01/VIDEsUoGlc6PK1FO86m8UAs2240501.shtml" class="news_a">

                <p>中国海军福建舰出海开展首次航行试验</p>
                <span>1</span>

            </a>
            <a href="https://news.cctv.com/2024/04/30/ARTITmhgBesiDzDdH2AyMh7P240430.shtml" class="news_a">
                <p>追光的你丨劳动浇灌幸福树</p>
                <span>2</span>
            </a>
            <a href="https://tv.cctv.com/2024/05/01/VIDEP5PkNqI58gYbDj3lo79i240501.shtml" class="news_a">
                <p>《和合寻源》第2集：天台胜境</p>
                <span>3</span>
            </a>
            <a href="https://news.cctv.com/2024/05/01/ARTI0AbmN5OX3UkB8B2CR9JO240501.shtml" class="news_a">
                <p>开局有力！一季度我国服务贸易快速增长</p>
                <span>4</span>
            </a>
            <a href="https://tv.cctv.com/2024/05/01/VIDEjtpuBk5iFgutNdhQR4JV240501.shtml" class="news_a">
                <p>道路交通安全法实施20周年 看我国道路交通出行变迁</p>
                <span>5</span>
            </a>
            <a href="https://news.cctv.com/2024/05/01/ARTIfqpVPzfsHFncsfrh0ZuC240501.shtml" class="news_a">
                <p>北京义务教育入学服务平台5月1日开通 6日信息采集</p>
                <span>6</span>
            </a>
            <a href="https://tv.cctv.com/2024/05/01/VIDEfqhQJi0Ec7MFpNvuVArK240501.shtml" class="news_a">
                <p>假期出游丨全球超1000个城市有中国旅客预订酒店</p>
                <span>7</span>
            </a>
            <a href="https://tv.cctv.com/2024/05/01/VIDEc9DMdxmC3agLFWPp4Tod240501.shtml" class="news_a">
                <p>中国自主汽车品牌加速打造全球化品牌</p>
                <span>8</span>
            </a>
            <a href="https://tv.cctv.com/2024/04/30/VIDEfS8EDVIpr4Nnt145Bzuq240430.shtml" class="news_a">
                <p>劳动者 追梦人 匠心求卓越</p>
                <span>9</span>
            </a>
            <a href="https://tv.cctv.com/2024/05/01/VIDEdXqFZuFUM9fCpNSmWLgS240501.shtml" class="news_a">
                <p>旅俄大熊猫宝宝“喀秋莎”有点“宅”</p>
                <span>10</span>
            </a>

        </div>
    </div>

    <!-- 第五个media盒子 -->
    <div class="fifth_media">

        <a href="https://new.qq.com/rain/a/UTR2024050100187800">
            <img src="./CSS小组作业image/新闻1.webp" alt="">
            <p>广东梅龙高速塌陷致19死30伤：塌方路面长约17.9米，18辆车陷落</p>
        </a>
        <a href="https://new.qq.com/rain/a/20240501Q0350700">
            <img src="./CSS小组作业image/新闻2.webp" alt="">
            <p>广东梅龙高速道路塌方，花钱上高速出了此类事故，该谁担责？</p>
        </a>
        <a href="https://new.qq.com/rain/a/UTR2024050100081100">
            <img src="./CSS小组作业image/新闻3.webp" alt="">
            <p>福建舰举行海试，专家：建造水平无疑是当下常规动力航母的天花板</p>
        </a>
        <a href="https://new.qq.com/rain/a/UTR2024042300459100">
            <img src="./CSS小组作业image/新闻4.webp" alt="">
            <p>男子在服务区买切糕称出1.2万？拍摄者：是商家泡药酒的药材价格</p>
        </a>
      
    </div>

    <!-- 最后一个游戏盒子 -->
    <div class="last_title" id="fifthbox">
        <h1>休闲游戏</h1>
       
    </div>
    <div class="snake">
        <a href="./网页/贪吃蛇游戏.html">
            <img src="./CSS小组作业image/贪吃蛇介绍.webp" alt="">
        </a>
    </div>


    </article>
    <hr style="margin-top: 30px;">
    <footer>
        <h3>网页分工</h3>
        <p>首页：何镒鹏</p>
        <p>音乐网页：刘凯</p>
    </footer>
    <script src="./index.js"></script>
</body>

</html>